<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-12 13:04:36
 * @LastEditTime: 2019-10-26 22:27:58
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div class="container">
      <!--头部 -->
      <infoHeader/>
      <!-- 表格信息 -->
      <div class="tabInfo">
        <el-table :data="tableData" style="width: 100% margin-bottom:10px" empty-text="无">
          <el-table-column prop="name" label="姓名" width="180px">
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号">
          </el-table-column>
          <el-table-column  label="申请日期" >
            <template slot-scope="scope">
            <span>{{$dayjs(scope.row.applyCreatetime).format('YYYY-MM-DD')}}</span>
          </template>
          </el-table-column>
          <el-table-column prop="companyName" label="单位名称" width="270px">
          </el-table-column>
          <el-table-column prop="licenseNo" label="营业执照号">
          </el-table-column>
          <el-table-column prop="telephone" label="联系电话">
          </el-table-column>
        </el-table>
      </div>
      <!-- 图片信息 -->
      <div class="imgInfo">
       <imgCard v-for="(item,i) in srcList" :key=i :src="srcList[i]" width="300" height="350"/>
      </div>
      <!-- 拒绝反馈 -->
      <feedback @getComment="getComment"></feedback>
      <!-- 按钮组 -->
      <div class="buttons">
          <el-button type="primary" size="large">上一页</el-button>
          <el-button type="success" size="large" @click="approve" ref="status" :disabled="flag1">{{status1}}</el-button>
          <el-button type="danger" size="large" @click="refuse" ref="status2" :disabled="flag2">{{status2}}</el-button>
          <el-button type="primary" size="large">下一页</el-button>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.container{
  padding: 20px;
  /* 表格信息 */
  .tabInfo{
    .el-table{
      font-size: 18px;
    }
  }
  /* 图片信息 */
  .imgInfo{
    margin-top: 20px;
    display: flex;
    flex-flow: row;
    justify-content: space-between
  }
  /*按钮组*/
  .buttons{
    display: flex;
    justify-content:space-between;
    margin-top: 20px;
    .el-button{
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
      width: 130px;
      height: 45px;
    }
  }
}
</style>

<script>
import infoHeader from '@/components/infoHeader'
import imgCard from '@/components/imgCard'
import feedback from '@/components/feedback'
import { getUserInfo, checkUser } from '@/api/userApplication'
export default {
  name: 'userApplicationInfo',
  data () {
    return {
      id: this.$route.params.id,
      comment: '',
      status: '',
      srcList: [],
      tableData: []
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getComment (data) {
      this.comment = data
    },
    getUserInfo () {
      getUserInfo(this.id).then(result => {
        console.log(result)
        this.tableData.push(result)
        this.srcList.push(result.idCardImage1)
        this.srcList.push(result.idCardImage2)
        this.srcList.push(result.authImage)
        this.srcList.push(result.licenseImage)
        this.status = result.status
      }).catch(err => {
        console.log('err', err)
      })
    },
    approve () {
      var user = JSON.parse(sessionStorage.getItem('userInfo'))
      checkUser({ id: this.id, status: 1, comment: this.comment, userId: user.id }).then(res => {
        this.$message({
          message: res,
          type: 'success'
        })
        this.status = 1
      })
    },
    refuse () {
      var user = JSON.parse(sessionStorage.getItem('userInfo'))
      checkUser({ id: this.id, status: 2, comment: this.comment, userId: user.id }).then(res => {
        this.$message({
          message: res,
          type: 'success'
        })
        this.status = 2
      })
    }
  },
  components: {
    imgCard,
    infoHeader,
    feedback
  },
  computed: {
    status1 () {
      var status1 = ''
      if (this.status === 1) {
        status1 = '已批准'
      } else {
        status1 = '批准'
      }
      return status1
    },
    status2 () {
      var status2 = ''
      if (this.status === 2) {
        status2 = '已拒绝'
      } else {
        status2 = '拒绝'
      }
      return status2
    },
    flag1 () {
      var flag1 = ''
      if (this.status === 1) {
        flag1 = true
      } else {
        flag1 = false
      }
      return flag1
    },
    flag2 () {
      var flag2 = ''
      if (this.status === 2) {
        flag2 = true
      } else {
        flag2 = false
      }
      return flag2
    }

  }
}
</script>
